import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Modal, Form, Input, Upload, Button, message, Radio } from 'antd'
import PropTypes from 'prop-types'
import { UploadOutlined } from '@ant-design/icons'
import { getUploadProps } from '@js/tool'
import { submitFiles } from '@js/request'

const { Item } = Form
const { TextArea } = Input

class Index extends Component {
  formRef = React.createRef()

  state = {
    fileList: []
  }

  async submitHandle (data) {
    let fileid = ''
    const file = data.file ? data.file instanceof Array ? data.file : data.file.fileList : []
    if (file.length) {
      const hide = message.loading('文件上传中', 120)
      try {
        fileid = await submitFiles(file)
      } catch (e) {
        hide()
        return message.warning('上传图片失败')
      }
      hide()
    }
    data.fileid = fileid
    data.status = '提交'
    delete data.file
    if (data.id) {
      this.updateHandle(data)
    } else {
      this.addHandle(data)
    }
  }

  addHandle (d) {
    const hide = message.loading('提交中')
    this.$post('/api/common/maintainlog', d)
      .then(res => {
        hide()
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.props.hide()
        this.props.refreshFn()
      })
      .catch(e => {
        hide()
      })
  }

  updateHandle (d) {
    const hide = message.loading('提交中')
    const id = d.id
    delete d.id
    this.$put(`/api/common/maintainlog/${id}`, d)
      .then(res => {
        hide()
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.props.hide()
        this.props.refreshFn()
      })
      .catch(e => {
        hide()
      })
  }

  initData () {
    const { data } = this.props
    const c = this.formRef.current
    if (data.file instanceof Array) {
      data.file = data.file.map(li => {
        li.name = li.original_filename
        return li
      })
      this.setState({ fileList: data.file })
    }
    c.setFieldsValue(data)
  }

  reset () {
    const c = this.formRef.current
    if (c !== null) {
      c.resetFields()
    }
    this.setState({ fileList: [] })
  }

  componentDidUpdate (prev) {
    const { visible, data } = this.props
    const c = this.formRef.current
    if (!prev.visible && visible) {
      if (c !== null && data !== null) {
        this.initData()
      }
    } else if (prev.visible && !visible) {
      this.reset()
    }
  }

  render () {
    const { data, visible, hide } = this.props
    const title = data === null ? '新增问题' : '编辑问题'
    return (
      <Modal title={title} open={visible} onCancel={hide} onOk={() => this.formRef.current.submit()}>
        <Form ref={this.formRef} labelCol={{ flex: '88px' }} initialValues={{ isqa: 0 }} onFinish={d => this.submitHandle(d)}>
          <Item name='id' noStyle><span /></Item>
          <Item label='标题' name='title' rules={[{ required: true, message: '标题不能为空' }]}>
            <Input placeholder='请输入' />
          </Item>
          <Item label='问题描述' name='content' rules={[{ required: true, message: '问题描述不能为空' }]}>
            <TextArea placeholder='请输入' rows={3} />
          </Item>
          <Item label='常见问题' name='isqa' rules={[{ required: true, message: '是否为常见问题不能为空' }]}>
            <Radio.Group>
              <Radio value={1}>是</Radio>
              <Radio value={0}>否</Radio>
            </Radio.Group>
          </Item>
          <Item name='file' label='截图上传'>
            <Upload {...getUploadProps.call(this, this.formRef)}>
              <Button disabled={this.state.fileList.length > 8}>
                <UploadOutlined /> 上传文件
              </Button>
            </Upload>
          </Item>
        </Form>
      </Modal>
    )
  }
}

Index.propTypes = {
  data: PropTypes.object,
  visible: PropTypes.bool,
  hide: PropTypes.func,
  refreshFn: PropTypes.func
}

Index.defaultProps = {
  data: null,
  visible: false,
  hide: () => {},
  refreshFn: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
  }
})

export default connect(mapState, mapDispatch)(Index)
